<template>
  <div class="wrapper_dashboard">
    <el-card class="dashboard_card">
      <template #header>
        <div class="cardBox-title">
          <div class="tt"><img class="ico" src="@static/img/dashboard/sj-ico.png" /><span>设计</span></div>
          <div class="cz">
            <div class="tool-box"><el-button type="primary" size="default" round>创建井</el-button></div>
            <el-icon class="moreBtn"><MoreFilled /></el-icon>
          </div>
        </div>
      </template>
      <div class="list-box">
        <div class="list-item" v-for="(item,index) in sjData" :key="index">
          <div class="list-left">
            <span class="xu" :class="index<=2?'active':''">{{index+1}}</span>
            <span>{{item.jh}}</span>
            <span>{{item.ly}}</span>
            <span class="gray-txt">{{item.sj}}</span>
          </div>
          <div class="list-right">
            <el-button class="btn_blue" :icon="Search">查看详情</el-button>
            <el-button class="btn_red" :icon="Delete">删除</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="dashboard_card">
      <template #header>
        <div class="cardBox-title">
          <div class="tt"><img class="ico" src="@static/img/dashboard/sh-ico.png" /><span>审核</span></div>
          <div class="cz">
            <div class="tool-box"><el-button type="primary" size="default" round>创建审批</el-button></div>
            <el-icon class="moreBtn"><MoreFilled /></el-icon>
          </div>
        </div>
      </template>
      <div class="list-box">
        <div class="list-item" v-for="(item,index) in shData" :key="index">
          <div class="list-left">
            <el-tag type="primary" v-if="item.zt == 0" size="default" class="zt">我审批</el-tag>
            <el-tag type="success" v-else class="zt" size="default">我提交</el-tag>
            <span>{{item.jh}}</span>
            <span>{{item.jd}}</span>
            <span class="gray-txt">{{item.sj}}</span>
          </div>
          <div class="list-right">
            <el-button class="btn_blue" :icon="Search">查看详情</el-button>
            <el-button class="btn_red" :icon="Delete">删除</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="dashboard_card">
      <template #header>
        <div class="cardBox-title">
          <div class="tt"><img class="ico" src="@static/img/dashboard/cx-ico.png" /><span>成果查询</span></div>
          <div class="cz">
            <el-form :inline="true" :model="searchData" size="default" class="tool-box">
              <el-form-item label="井号" prop="jh">
                <el-input v-model="searchData.jh" style="width:140px;" placeholder="请输入井号" clearable />
              </el-form-item>
              <el-form-item label="选择时间" prop="sj">
                <el-date-picker
                  v-model="searchData.sj"
                  style="width:240px;"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="截止时间"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onFind" round>查询</el-button>
              </el-form-item>
            </el-form>
            <el-icon class="moreBtn"><MoreFilled /></el-icon>
          </div>
        </div>
      </template>
      <div class="list-box">
        <div class="list-item" v-for="(item,index) in cgcxData" :key="index">
          <div class="list-left">
            <el-tag type="primary" class="zt" size="default">{{item.jb}}</el-tag>
            <el-tag type="primary" class="zt" size="default">{{item.jx}}</el-tag>
            <span>{{item.jh}}</span>
            <span class="gray-txt">{{item.sj}}</span>
          </div>
          <div class="list-right">
            <el-button class="btn_blue" :icon="Download">文档下载</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="dashboard_card">
      <template #header>
        <div class="cardBox-title">
          <div class="tt"><img class="ico" src="@static/img/dashboard/tj-ico.png" /><span>统计</span></div>
          <div class="cz">
            <el-icon class="moreBtn"><MoreFilled /></el-icon>
          </div>
        </div>
      </template>
      <div class="tj-box">
        <div class="it-item" v-for="(item,index) in tjData" :key="index">
          <div class="it-name">
            {{item.name}}
            <p>{{item.value}}个</p>
          </div>
          <img class="ico" src="@static/img/dashboard/layer-ico.png" />
        </div>
      </div>
      <div class="echart-box" id="echart-tj"></div>
    </el-card>
  </div>
</template>

<script setup>
import{ref, reactive, onMounted} from 'vue';
import {useRoute, useRouter} from "vue-router";
import { Delete, Search, Download } from '@element-plus/icons-vue';
import * as echarts from 'echarts';

//设计
let sjData= ref([]);
const getSjData = ()=>{
  sjData.value =[
    {id:'001',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
    {id:'002',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
    {id:'003',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
    {id:'004',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
    {id:'005',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
    {id:'006',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
    {id:'007',jh:'TC15623-XUI',ly:'任务来源',sj:'2024-05-12 15:15:41'},
  ]
}
//审核
let shData= ref([]);
const getShData = ()=>{
    shData.value =[
    {id:'001',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:0},
    {id:'002',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:0},
    {id:'003',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:0},
    {id:'004',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:1},
    {id:'005',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:1},
    {id:'006',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:1},
    {id:'007',jh:'TC15623-XUI',jd:'审核节点',sj:'2024-05-12 15:15:41',zt:1},
  ]
}
//成果查询
let cgcxData = ref([]);
let searchData = ref({
  jh:'',
  sj:''
});
const onFind = ()=>{
  cgcxData.value =[
    {id:'001',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
    {id:'002',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
    {id:'003',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
    {id:'004',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
    {id:'005',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
    {id:'006',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
    {id:'007',jh:'TC15623-XUI',jx:'井型',sj:'2024-05-12 15:15:41',jb:'井别'},
  ]
}
//统计
let tjData = ref([]);
const getTjData = ()=>{
  tjData.value = [
    {name:'总体完成',value:'15236'},
    {name:'总体正在进行',value:'5236'},
    {name:'个人完成',value:'10236'},
    {name:'个人正进行',value:'2836'}
  ]
}

const initTjChart = ()=>{
      let data=[
        {name:'井口总数',dataArr:[29, 19, 26, 44, 20]},
        {name:'水平井数',dataArr:[38, 36, 44, 33, 20]},
        {name:'定向井数',dataArr:[33, 45, 10, 23, 60]}
      ]
      let seriesArr=[];
      data && data.forEach((item,index)=>{
        seriesArr.push({
          name: item.name,
          type: 'bar',
          stack: '1',
          barWidth: '40%',
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              offset: [-5, 0],
              formatter: '{c}',
              textStyle: {
                align: 'center',
                baseline: 'middle',
                fontSize: 12,
                color: '#fff'
              }
            },
          },
          data:item.dataArr
        })
      });

      let chartDom = document.getElementById("echart-tj");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '12%',
          left: -150,
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          icon: 'rect',
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 30,
          data: ['井口总数','水平井数','定向井数'],
          left: 'center',
          top:'2%',
          textStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        xAxis: [{
          type: 'value',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#666",
              fontSize: 12
            }
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#cfe1ff'
            }
          }
        }],
        yAxis: [{
          type: 'category',
          data: ['采油厂一', '采油厂二', '采油厂三', '采油厂四', '采油厂五'],
          axisLine: {
            show: false
          },
          inverse: true,
          axisLabel: {
            margin: 160,
            color: '#183442',
            align: 'left',
            fontSize: 12,
            formatter: function (value, index) {
              return '{idx|' + (1 + index) + '} {title|' + value + '}{total|共14'+'}'
            },
            rich: {
              idx: {
                color: '#183442',
                backgroundColor: 'rgba(69,186,255,.3)',
                fontSize:10,
                borderRadius: 100,
                padding: [3, 6]
              },
              title: {
                width: 68
              },
              total:{
                color: '#004CFF',
                backgroundColor: '#e6edff',
                borderRadius: 4,
                height:20,
                fontWeight:'bold',
                fontSize:12,
                align:'center',
                padding: [2, 10],
                width: 40
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        color: [
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#00AAFF'
            },
            {
              offset: 1,
              color: '#2F66EC'
            }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#17D63A'
            },
            {
              offset: 1,
              color: '#00B47E'
            }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#fc7337'
            },
            {
              offset: 1,
              color: '#FF4D00'
            }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#fe9951'
            },
            {
              offset: 1,
              color: '#DB8F39'
            }
          ]),
        ],
        series: seriesArr
    }
    myChart.setOption(option);
    window.addEventListener("resize", ()=>{
    myChart.resize();
    });
}

onMounted(async () => {
  getSjData();
  getShData();
  onFind();
  getTjData();
  initTjChart();
});
</script>

<style scoped>
.wrapper_dashboard{
  padding:15px;
  height:100%;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-content:space-between;
}
.dashboard_card{
  width:calc(50% - 8px);
  height:calc(50% - 8px);
}
.dashboard_card :deep(.el-card__header){
  padding:0;
  height:44px;
  border-bottom:0 none;
}
.dashboard_card :deep(.el-card__body){
  padding:3px 15px 12px;
  height:calc(100% - 44px);
}
.cardBox-title{
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 15px;
  position:relative;
}
.cardBox-title::before{
  content:'';
  position:absolute;
  left:0;
  top:30%;
  height:40%;
  width:4px;
  background:#007aff;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
}
.cardBox-title .tt{
  display:flex;
  align-items:center;
  font-size:16px;
  font-weight:bold;
  color:#000;
}
.cardBox-title .tt .ico{
    width:16px;
    margin-right:8px;
}
.cardBox-title .tt span{
  display:inline-block;
  padding-left:6px;
  width:120px;
  background:url('/static/img/dashboard/title-bg.png') no-repeat left 10px / 100% 10px;
}
.cardBox-title .cz{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.cardBox-title .tool-box{
  padding:0 10px;
}
.tool-box :deep(.el-form-item){
    margin:0 0 0 10px;
}
.moreBtn{
    color:#63728b;
    font-size:16px;
}
.list-box{
    height:100%;
}
.list-box .list-item{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eff3ff;
  font-size:14px;
  color:#000;
}
.list-item .list-left{
  font-size:14px;
  color:#000;
  flex:1;
  display:flex;
  align-items:center;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item span{
    margin-right:10px;
}
.list-item .xu{
  background:#f0f0f0;
  color:#666;
  width:24px;
  height:20px;
  line-height:24px;
  text-align:center;
  border-radius:4px;
}
.list-item .xu.active{
  background:#e6edff;
  color:#007AFF;
}
.list-item .gray-txt{ 
  color:#8c8c8c;
}
.btn_blue{
  height:30px;
  color:#007AFF;
  background:#f1f8fe;
  font-size:13px;
  padding:4px 10px;
}
.btn_red{
  height:30px;
  color:#FF3E3E;
  background:#fff5f4;
  border:1px solid #FF3E3E;
  font-size:13px;
  padding:4px 10px;
}
:deep(.el-tag){
  border:0 none;
}
:deep(.el-tag.el-tag--primary){
  background:#e5eeff;
  color:#004CFF;
}
:deep(.el-tag.el-tag--success){
  background:#e6f7e7;
  color:#02AF14;
}
.echart-box{
  height:calc(100% - 70px)
}
.tj-box{
  height:70px;
  display:flex;
  justify-content:space-between;
}
.it-item{
  width:calc(25% - 10px);
  height:70px;
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: linear-gradient(270deg, #3F9BFF 0%, #007AFF 100%), linear-gradient(0deg, #0052D9, #0052D9), #FFFFFF;
  box-shadow: 0px 1px 12px rgba(0, 82, 217, 0.3);
  border-radius: 4px;
  color:#fff;
  padding:0 12px;
}
.it-item::before{
  content:'';
  height:3px;
  width:20px;
  position:absolute;
  left:12px;
  top:0;
  background:#fff;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}
.it-item .it-name p{
    font-size:20px;
}
.it-item .ico{
    width:25px;
    height:25px;
}
</style>